<template>
  <div>
    <re-el-table
      :data="shipmentGoods"
      :border="true"
      :span-method="objectSpanMethod"
      :show-limit="true"
    >
      <el-table-column
        prop="image"
        :label="$t('table.productCover')"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          <div class="img-box img-one">
            <img :src="row.image" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        :label="$t('table.title')"
        align="left"
        show-overflow-tooltip
        min-width="250"
      >
        <template slot-scope="{row}">
          <div>
            <div class="goods-title hidden-1">{{row.title}}</div>
            <div class="goods-attr hidden-1">
              <span
                v-for="attr in row.attributes"
                :key="attr.name"
                class="attr"
              >
                {{attr.name}} : {{attr.value}}
                <span class="attr-link"> | </span>
              </span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.ListingIDAndSKU')"
        align="center"
        min-width="150"
      >
        <template slot-scope="{row}">
          <template v-if="row.isTB">
            {{ $t('shipment.Not labeled') }} {{row.sku ? `(${row.sku})` : ''}}
          </template>
          <template v-else-if="row.isSystemLabel">
            {{ $t('shipment.System label') }} ({{row.sku}})
          </template>
          <template v-else>
            {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
          </template>
        </template>
      </el-table-column>

      <m-l-code-column></m-l-code-column>

      <el-table-column
        prop="weight"
        :label="$t('table.SKU重量与尺寸')"
        width="150"
        align="center"
      >
        <template v-slot="{row}">
          <template v-if="row.weight">
            {{row.weight}}kg ({{row.length}}×{{row.width}}×{{row.height}}cm)
          </template>
          <template v-else>
            -
          </template>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.goodsNumBox')"
        align="left"
        width="100"
        prop="goodsNumInBox"
      >
        <template slot-scope="{row}">
          {{row.editGoodsNumInBox}}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.是否需要组装')"
        prop="isCombination"
        align="center"
        width="150"
      >
        <template v-slot="{row}">
          <template v-if="row.isCombination">
            {{$t('common.是')}}
          </template>
          <template v-else>
            {{$t('common.否')}}
          </template>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('table.预计入库数量（整箱/箱）')"
        width="200"
        prop="exGoodsBoxNum"
      >
        <template slot-scope="{row}">
          {{row.exGoodsBoxNum}}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.expectedReceiptQuantityMix')"
        width="200"
        prop="exGoodsMixinNum"
      >
        <template slot-scope="{row}">
          {{row.exGoodsMixinNum}}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.exTotalGoodsNum')"
        width="200"
        prop="exGoodsNum"
      >
        <template slot-scope="{row}">
          {{getExGoodsNum(row)}}
        </template>
      </el-table-column>


    </re-el-table>

  </div>
</template>

<script>
import MLCodeColumn from "@/views/stock/components/MLCodeColumn";
import ReElTable from "@/components/Common/ReElTable";
import MLCodeListColumn from "@/views/stock/components/MLCodeListColumn.vue";

export default {
  name: 'ShipmentGoodsTable',
  components: {ReElTable, MLCodeColumn},
  props: {
    shipmentGoods: {
      type: Array,
      default: () => [],
    },
    shipment: {
      type: Object,
    }
  },
  methods: {
    // 计算预计入库商品总数
    getExGoodsNum(row){
      const suitId = row.suitId
      let num = 0
      this.shipmentGoods.filter(item=> item.suitId === suitId)
        .forEach(item=>{
          const num1 = item.goodsNumInBox * item.exGoodsBoxNum // 箱装数数量
          const num2 = item.exGoodsMixinNum
          item.exGoodsNum = num1 + num2
          if(num1){
            num += num1
          }
          if(num2){
            num += num2
          }
        })
      return num
    },
    getRlGoodsNum(row){
      const suitId = row.suitId
      let num = 0
      this.shipmentGoods.filter(item=> item.suitId === suitId)
        .forEach(item=>{
          num += row.rlGoodsNum
        })
      return num
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const mergeCell = this.getMergeCell(this.shipmentGoods)
      if(mergeCell[column.property]){
        if(mergeCell[column.property][rowIndex]) {
          return [mergeCell[column.property][rowIndex], 1]
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },
    getMergeCell(list){
      const mergeObj = {};
      // 根据suitId合并的字段
      const mergeFieldArr = [
        'image',
        'title',
        'goodsNumInBox',
        'exTotalGoodsNum',
        'exGoodsNum',
        'rlGoodsNum',
        'goodsValue',
        'isCombination',
        'weight',
      ];

      mergeFieldArr.forEach(key=>{
        mergeObj[key] = [1];
      })

      let mergeFieldKey = 0;
      list.forEach((item,index)=>{
        // 第一列数据不处理
        if(index === 0){
          return;
        }
        // 根据suitId 合并


        if(item.suitId && item.suitId === list[index - 1].suitId){
          mergeFieldArr.forEach(key=>{
            mergeObj[key][mergeFieldKey] += 1;
            mergeObj[key].push(0); // 添加一个0 站位
          })
        }else{
          mergeFieldKey = index; // 记录当前行
          mergeFieldArr.forEach(key=>{
            mergeObj[key].push(1); // 添加一个1
          })
        }
      })

      return mergeObj;
    },
  }
}

</script>

<style scoped lang="scss">

</style>
